<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="操作类型：">
          <el-select
                  clearable
                  v-model="listQuery.operateType">
            <el-option
                    v-for="item in typeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.operateTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="操作人：">
          <el-select v-model="listQuery.userId" placeholder="请选择" clearable filterable >
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.realName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="listQuery.operateContent"></el-input>
        </el-form-item>
        <el-form-item label="来源：">
          <el-select v-model="listQuery.operateSource" placeholder="请选择" clearable>
            <el-option v-for="item in sourceList"  :value="item.code" :label="item.name" :key="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
                prop="operateTime"
                label="时间"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
          prop="operateUser"
          label="操作人"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
                prop="operateIp"
                label="操作IP"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
          prop="operateCity"
          label="IP所在地"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          align="center"
          prop="operateSource"
          label="来源"
          width="100">
        </el-table-column>
        <el-table-column
          label="操作类型"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.operateType | fifType}}
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          show-overflow-tooltip
          header-align="center"
          prop="operateContent"
          label="备注">
        </el-table-column>
        <el-table-column
          header-align="center"
          label="操作参数">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content" style="width:300px;word-break: break-all; ">{{ scope.row.operateRemark}}</div>
              <div style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap;">{{ scope.row.operateRemark}}</div>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

  </div>
</template>

<script>
    import { staffsLogList,getUserOption,} from '@/api/partner'
    import {supplierListApi,commonSupplierContactList} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery = {
        operateType:'',
        operateTime:'',
        userId:'',
        operateContent:'',
        operateSource:'',
        pageNum:1,
        pageSize:10,
    };
    export default {
        name: "index",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
                list:[],
                count:0,
                loading:false,
                userOptionList:[],
                sourceList:[{name:'pc',code:'pc'},{name:'手机',code:'mobile'}],
                typeList:[{name:'登录',code:'login'},{name:'下载',code:'download'},{name:'删除',code:'delete'}],
            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),

        },
        created() {
            this.getList();
            this.getUserOptionList();
        },
        filters: {
          fifType(val) {
               if(val == 'login' ){
                 return '登录'
               }else if(val == 'download'){
                 return '下载'
               }else if(val == 'delete'){
                 return '删除'
               }
            },
        },
        methods:{

            //获取员工下拉选项
            getUserOptionList(){
                getUserOption().then((res)=>{
                    this.userOptionList = res;
                })
            },


            handleSearchList(){
                this.listQuery.pageNum = 1;
                this.getList();
            },
            //获取跟进记录
          getList(){
                this.loading = true;
                let data = JSON.parse(JSON.stringify(this.listQuery));
                if(data.createTime && data.createTime != ''){
                    data.createTime[0] = data.createTime[0]/1000;
                    data.createTime[1] = data.createTime[1]/1000;
                }
            staffsLogList(data).then((res)=>{
                    this.list = res.list;
                    this.count = res.count;
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                })
            },

            handleSizeChange(val){
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val){
                this.listQuery.pageNum = val;
                this.getList();
            },

        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
